<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spring Security OAuth2 单点登录</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .main-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .login-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            padding: 3rem;
            text-align: center;
            max-width: 500px;
            width: 100%;
            margin: 20px;
        }
        .welcome-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            padding: 3rem;
            text-align: center;
            max-width: 600px;
            width: 100%;
            margin: 20px;
        }
        .logo-icon {
            font-size: 4rem;
            color: #667eea;
            margin-bottom: 1rem;
        }
        .login-btn {
            background: linear-gradient(45deg, #667eea, #764ba2);
            border: none;
            padding: 15px 30px;
            font-size: 1.1rem;
            border-radius: 50px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }
        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
        }
        .feature-list {
            text-align: left;
            margin-top: 2rem;
        }
        .feature-item {
            margin-bottom: 1rem;
            color: #666;
        }
        .feature-item i {
            color: #667eea;
            margin-right: 10px;
        }
        .user-info {
            background: rgba(102, 126, 234, 0.1);
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        .action-buttons .btn {
            margin: 0.5rem;
            border-radius: 25px;
            padding: 10px 25px;
        }
    </style>
</head>

<body>
    <div class="main-container">
        <div class="container">
            <!-- 未登录状态 -->
            <div sec:authorize="!isAuthenticated()" class="login-card">
                <div class="logo-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h1 class="mb-4">欢迎使用单点登录系统</h1>
                <p class="text-muted mb-4">安全、便捷的统一身份认证平台</p>
                
                <div class="feature-list">
                    <div class="feature-item">
                        <i class="fas fa-check-circle"></i>
                        一次登录，全平台通用
                    </div>
                    <div class="feature-item">
                        <i class="fas fa-shield-alt"></i>
                        企业级安全保障
                    </div>
                    <div class="feature-item">
                        <i class="fas fa-users"></i>
                        统一用户管理
                    </div>
                    <div class="feature-item">
                        <i class="fas fa-mobile-alt"></i>
                        多端设备支持
                    </div>
                </div>
                
                <div class="mt-4">
                    <a href="/oauth2/authorization/sso-login" class="btn btn-primary login-btn">
                        <i class="fas fa-sign-in-alt me-2"></i>
                        立即登录
                    </a>
                </div>
                
                <div class="mt-3">
                    <small class="text-muted">
                        点击登录按钮将跳转到安全的OAuth2认证中心
                    </small>
                </div>
            </div>
            
            <!-- 已登录状态 -->
            <div sec:authorize="isAuthenticated()" class="welcome-card">
                <div class="logo-icon">
                    <i class="fas fa-user-check"></i>
                </div>
                <h1 class="mb-3">登录成功！</h1>
                <p class="text-success mb-4">
                    <i class="fas fa-check-circle me-2"></i>
                    您已成功通过OAuth2单点登录验证
                </p>
                
                <div class="user-info">
                    <h5 class="mb-3">
                        <i class="fas fa-user me-2"></i>
                        用户信息
                    </h5>
                    <p class="mb-2">
                        <strong>用户名:</strong> 
                        <span th:text="${#authentication.name}" class="text-primary">用户名</span>
                    </p>
                    <p class="mb-0">
                        <strong>权限:</strong> 
                        <span th:text="${#authentication.authorities}" class="text-info">权限列表</span>
                    </p>
                </div>
                
                <div class="action-buttons">
                    <a href="/user" class="btn btn-info">
                        <i class="fas fa-user me-2"></i>
                        查看详细信息
                    </a>
                    <a href="/resource" class="btn btn-success">
                        <i class="fas fa-database me-2"></i>
                        访问资源
                    </a>
                    <a href="/logout" class="btn btn-outline-secondary">
                        <i class="fas fa-sign-out-alt me-2"></i>
                        安全退出
                    </a>
                </div>
                
                <div class="mt-4">
                    <small class="text-muted">
                        <i class="fas fa-info-circle me-1"></i>
                        您的登录状态将在多个应用间保持同步
                    </small>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        // 页面加载动画
        $(document).ready(function() {
            $('.login-card, .welcome-card').hide().fadeIn(800);
        });
        
        // 登录按钮点击效果
        $('.login-btn').on('click', function() {
            $(this).html('<i class="fas fa-spinner fa-spin me-2"></i>正在跳转...');
        });
    </script>
</body>
</html>
